
import { init, h } from 'snabbdom'
import style from 'snabbdom/modules/style'
import eventlisteners from 'snabbdom/modules/eventlisteners'
let patch = init([style, eventlisteners]);


let id = 1;

function getStyle(clickEvent) {
    return {
        style: {
            marginLeft: '20px',
            cursor: 'pointer'
        },
        on: {
            click: clickEvent ? clickEvent : null
        }
    }
}
let elTitle = function () {
    return h('p', { key: 'a1' }, 'top 10 movies')
}
let sortDiv = function () {
    return h('div', { key: 'a1' }, [
        h('span', getStyle(onSort), 'rank'),
        h('span', getStyle(onSort), 'title'),
        h('span', getStyle(onSort), 'descrption'),
        h('span', getStyle(toAdd), 'Add'),
    ])
}
var ay = [h('div', { key: id }, [
    h('span', getStyle(), id),
    h('span', getStyle(), '标题' + id),
    h('span', getStyle(), '简介' + id),
    h('span', getStyle(toDelete), 'X')
])];
let list = h('div', ay)
let vnode = h('div#ContentId.cls', {
    style: {},
    on: {},
    key: 99
}, [elTitle(), sortDiv(), list]);
let app = document.getElementById('app');
let oldVnode = patch(app, vnode);
function onSort(e) {
    console.log(e.target.textContent)
}
function getSpan(fn, str) {
    return h('span.span', {
        on: {
            click: toDelete
        }
    }, str)
}
function getAdd() {
    var ay3=[getSpan(),getSpan(),getSpan(),getSpan()]
    ay.push(h('div#divId' + id, { key: id },ay3));
    return h('div', ay)
}
function toAdd() {
    id++;
    var v = h('div#ContentId.cls', [elTitle(), sortDiv(), getAdd()]);
    oldVnode = patch(oldVnode, v)
}
function toDelete(e) {
    console.log(e.target.textContent)
}

